*{
    margin:0;
    padding:0;
   
}
li{
    list-style:none
}
.nav{
    display:flex;
    position:fixed;
    top:0;
    margin:0;
    justify-content: center;
    width:100%;
    height:50px;
    background-color: white;
    border-bottom: 1px solid #e8e8e8;
}
.containter{
    
    width:80%;
    height:100%;
    /* border: 1px solid; */
}
.containter-left{
    display:flex;
    justify-content:start;
    width: 50%;
    height:100%;
    /* border: 1px solid; */
}
.containter-left>div{
    /* border: 1px solid #000; */
    width:10%;
}
.containter-left-1{
    margin-top:1%;

}
.containter-left-2>a{
    font-size:14px;
    line-height:50px;
    margin-left:40%;
    color:#747474;
}
.containter-left-3>a{
    font-size:14px;
    line-height:50px;
    margin-left:40%;
    color:#747474;
}
.containter-left-4>a{
    font-size:14px;
    line-height:50px;
    margin-left:40%;
    color:#747474;
}
.containter-left-5>a{
    font-size:14px;
    line-height:50px;
    margin-left:40%;
    color:#747474;
}
.containter-left-6>a{
    font-size:14px;
    line-height:50px;
    margin-left:40%;
    color:#747474;
}
.containter-left-7>a{
    font-size:14px;
    line-height:50px;
    margin-left:40%;
    color:#747474;
}
.containter-left-8>a{
    font-size:14px;
    line-height:50px;
    margin-left:13%;
    color:#747474;
}
.containter-left-9>a{
    font-size:14px;
    line-height:50px;
    margin-left:13%;
    color:#747474;
}
.containter-left-10>a{
    font-size:14px;
    line-height:50px;
    margin-left:13%;
    color:#747474;
}

.containter>div{
    float: left;
}
.containter-right{
    display:flex;
    justify-content:start;
    width:49%;
    height:100%;
    /* border: 1px solid; */
}

.containter-right>input{
    height:30px;
    line-height:40px;
    margin-top:10px;
}
.containter-right>input:nth-of-type(1){
    padding-left:20px;
    margin-left:20%;
    width:70%;
}

.containter-right>input:nth-of-type(2){
    width:10%;
    color:white;
    background-color:orange;
    border-style: none;
    padding-left:7px;
    height:34px;


}

.header{
    display:flex;
    justify-content: center;
    width: 100%;
    height:180px;
    /* border: 1px solid #000; */
    margin-top:50px;
}

.header-middle{
    display:flex;
    justify-content: center;
    flex-wrap:wrap;

    width: 30%;
    height:100%;
    /* border: 1px solid #000; */
}
.header-top{
    display:flex;
    justify-content: center;
    width: 50%;
    height:50%;
    /* border: 1px solid #000; */
}
.header-top>span{
    display:flex;
    align-items: center;
    font-size: 40px;
    font-weight:300;
}
.header-down{
        width: 60%;
        height:50%;
        /* border: 1px solid #000; */
}
.header-down>span{
    font-size: 17px;
   margin-left: 40px;
   line-height:145px;
}


/* 花瓣部分 */
.contents{
    display: flex;
    justify-content: center;
    width:100%;
    min-height:900px;
    /* border: 1px solid #000; */
    background-color:#f3f5f8;
}
.contents-body{
    width: 81%;
    /* border: 1px solid #000; */
    height:100%;

}

.contents-body-head{
    display: flex;
    justify-content: start;
    width:100%;
    height:140px;
    margin-top:20px;
    /* border: 1px solid #000; */
}
.contents-body-head>li{
    margin-left:14px;
}
.contents-body-con{
    width:100%;
    height:100%;
    background-color:cyan;
    /* border: 1px solid #000; */
}

.contents-body-con>ul{
    margin-left:14px;

    float: left;
    width: 236px;
}

#li{
    margin-top:30px;

}
.contents-body-con-box{
    float: left;
    /* margin-top: 20px; */
}
.contents-body-con-box{
    width:236px;
    /* height:100%; */
    border: 1px solid #e8e8e8;

}
.contents-body-con-box:hover{
    transition-duration: .3s;
    cursor:pointer;

    box-shadow:0px 10px 10px 3px cyan;
}

.contents-body-con-box:hover .contents-body-con-box-div2>div:nth-of-type(3){
    transition-duration: .3s;

    display:block;
}
.contents-body-con-box>img{
    
    width:236px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;


}

.contents-body-con>.contents-body-con-box{
    margin-left:14px;
    background-color: #fff;
    border-radius:10px;
}
.contents-body-con-box-div1{
    width: 100%;
    height:30px;
    border-bottom: 1px solid #000;
}
.contents-body-con-box-div1>span{
    font-size: 14px;
    color:#747474;
    padding-left:10px;
}
.contents-body-con-box-div2{
    width: 100%;
    height:80px;
}
.contents-body-con-box-div2>span{
    font-size: 14px;
    color:#747474;
    padding-left:10px;
}
.contents-body-con-box-div2>div>img{
    width:40px;
    border-radius:100%;
    margin-top:10px;
    margin-left:10px;
}
.contents-body-con-box-div2>div{
    float: left;
   
    /* border: 1px solid #000; */
}
.contents-body-con-box-div2>div>span{
    font-size: 14px;
    margin-top:0px;
    color:#747474;
    /* border: 1px solid #000; */

}
.contents-body-con-box-div2>div:nth-of-type(2){
    margin-left: 20px;
    text-indent: 2em;

    width:50%;
    height:100%;
    margin-top:20px;
}
.contents-body-con-box-div2>div:nth-of-type(3){
    width:30px;
    height:16px;
    /* border: 1px solid #000; */
    margin-top:83px;
    margin-left:12px;
    display:none;
    background:url("../img/logo/home_comment_act_icon.png") no-repeat 0px 0px;
}
.contents-body-con-box-div2>div:nth-of-type(3):hover{
    cursor:pointer;
    background:url("../img/logo/home_comment_act_icon.png") no-repeat 0px -20px;
}
.contents-body-con-box-div2>div:nth-of-type(3):hover #dis{
    display:block;
}

.contents-body-con-box-div3{
    width:100%;
    margin-top:20px;
    height:100px;
    border-top: 1px solid #e8e8e8;
    padding-top:10px;
    display:none;
}

.contents-body-con-box-div3-input{
    width:100%;
    height:45%;
    /* border: 1px solid #000; */
}

.fl{
    float: left;
}
.fl{
    margin-left:10px;
    width:50px;
}
.input2{
    width:150px;
    height: 45px;
    padding-left:10px;
}
.contents-body-con-box-div3-input>div:nth-of-type(2)>input{
    width:70px;
    height:25px;
    margin-top:10px;
    margin-left:60px;
    border-style:none;
    background-color:#747474;
    color: white;

}
.model{
    position:fixed;
    top:0px;
    left:0px;
    /* margin:5% auto; */

    width:100%;
    height:100%;
    background-color:rgba(5, 5, 5, 0.5);
    border: 1px solid #000;
    display:none;
}
.model-img{   
    /* position: absolute;
    top:10%;
    left:680px; */
    background-color:rgba(5, 5, 5, 0.5)!important;
    padding-top:100px;
    text-align:center;
    /* margin:0 auto; */

    /* height:100%; */
    /* border: 1px solid #000; */
    /* padding-left:20px; */

}
.model-img-div{

    /* display:flex;
    justify-content: center;
    flex-shrink:0; */
    padding: 10px;
    /* width:400px; */
    height:1000px;
    /* border:1px solid; */
    /* background-color: white; */
}
.model-img-div>img{
    /* width:400px; */
    height:700px;
    box-shadow:0px 0px 10px 3px white;



}